<!-- eslint-disable vue/multi-word-component-names -->
<template>
<div>
        <van-search
            v-model="value"
            show-action
            placeholder="请输入影院的名字"
            @search="onSearch"
            @cancel="onCancel"
        />
    <div v-if="value">    <!--class="box"-->
        <ul>
            <li v-for="data in computedList" :key="data.cinemaId">
                <div class="left">
                    <div class="cinema_name">{{data.name}}</div>
                    <div class="cinema_address">{{data.address}}</div>
                </div>

                <div class="right">
                    <div class="cinema_price"><span>￥</span>{{data.lowPrice/100}}<span>起</span></div>
                    <div></div>
                </div>
            </li>
        </ul>
    </div>
</div>
</template>
<script>

export default {
  data () {
    return {
      value: ''
    }
  },
  computed: {
    computedList () {
      return this.$store.state.cinemaList.filter(item =>
        item.name.toUpperCase()
          .includes(this.value.toUpperCase()) ||
        item.address.toUpperCase()
          .includes(this.value.toUpperCase()))
    }
  },
  mounted () {
    if (this.$store.state.cinemaList.length === 0) {
      this.$store.dispatch('getCinemaData', this.$store.state.cityId)
    }
  },
  methods: {
    onSearch () {},
    onCancel () {
      this.$router.back()
    }
  }
}
</script>
<style lang="scss" scoped>
li{
    display: flex;
    justify-content: space-between;
    padding: 1.875rem;
}
.left{
    width: 35rem;
    height: 5.625rem;
    .cinema_name{
        font-size: 1.875rem;

    }
    .cinema_address{
        font-size: 1.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.right{
    height: 5.625rem;
    .cinema_price{
        font-size: 1.875rem;
        color:#ff5f16;
        span{
            font-size: 1.5rem;
        }
    }
}
.van-search{
    position: fixed;
    top:0;
    right: 0;
    left:0;
}
</style>
